<template>
	<div 	class="users">
		<h2>学长学姐管理</h2>
		<el-button
			class="add-btn"
			type="primary"
			size="small"
			icon="el-icon-circle-plus-outline"
			@click="onclickCreate"
		>
			添加学长学姐
		</el-button>
		<!-- 表单 -->
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				:data="users"
				row-key="siId"
				@sort-change="sortChange"
				@filter-change="filterChange"
			>
				<el-table-column
					label="用户ID"
					width="110px"
					prop="siUId"
				/>
				<el-table-column
					label="昵称"
					prop="siNickName"
					align="center"
				/>
				<el-table-column
					label="手机号"
					align="center"
					prop="siPhone"
				/>
				<el-table-column
					label="咨询次数"
					align="center"
					sortable
					:sort-orders="['descending','ascending', null]"
					column-key="siConsultedNum"
					prop="siConsultedNum"
				/>
				<el-table-column
					label="评分"
					align="center"
					sortable
					:sort-orders="['descending','ascending', null]"
					column-key="siGrade"
					prop="siGrade"
				/>
				<el-table-column
					label="是否显示"
					prop="show"
					align="center"
				>
					<template slot-scope="scope">
						<el-checkbox
							:checked="scope.row.show"
							@change="updateConsult($event,scope.row,'show')"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="是否置顶"
					prop="stick"
					align="center"
				>
					<template slot-scope="scope">
						<el-checkbox
							:checked="scope.row.priority"
							@change="updateConsult($event,scope.row,'priority')"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
					width="150"
				>
					<template slot-scope="scope">
						<div class="center control">
							<el-button
								size="mini"
								@click="$pushTo('ConsultDetail', {siId: scope.row.siId})"
							>
								编辑
							</el-button>
							<el-button
								size="mini"
								type="danger"
								@click="onclickDel(scope.row)"
							>
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadUserData"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import {
  getConsultUsers,
  createConsultUser,
  removeConsultUser,
  updateConsultUser,
  postConsultTime
} from '@user/api/consult'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Consult',
    },
  },
  data() {
    return {
      sortBy: null, // 排序字段
      orderBy: null, // 排序方式，顺序和逆序
      pageNum: 1,
      pageSize: 10,
      total: 0,
      users: [],
    }
  },
  created() {
    this.loadUserData(1)
  },
  methods: {
    /**
		 * 获取用户信息
		 * @param {Number} pageNum
		 */
    async loadUserData(pageNum = this.pageNum) {
      this.$loading()
      try {
        const res = (await getConsultUsers({
          pageNum,
          pageSize: this.pageSize
        })).data

        this.users = res.pageData
        this.total = res.total
        this.pageNum = pageNum
        console.log(this.users)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 排序发送改变
		 */
    sortChange(column) {
      /* 判断是否有排序，无排序则null */
      this.sortBy = column.order ? column.prop : null
      if (column.order) {
        this.orderBy = column.order === 'descending' ? 'desc' : 'asc'
      } else {
        this.orderBy = column.order
      }
      this.getUserData(1)
    },
    /**
		 * 筛选改变
		 */
    filterChange(filters) {
      for (const key in filters) {
        const res = filters[ key ]

        if (res.length === 0) {
          this[ key ] = null
        } else {
          this[ key ] = res[ 0 ]
        }
      }
      this.getUserData(1)
    },
    /**
		 * 创建学长学姐信息
		 */
    async onclickCreate() {
      this.$loading()
      try {
        const res = (await createConsultUser({
          siUId: 111,
          priority: 1,
          show: 0,
        })).data

        await postConsultTime({
          siId: res,
          time: [
            {
              sctWeekDay: 1,
              sctStartTime: ''
            },
            {
              sctWeekDay: 2,
              sctStartTime: ''
            }, {
              sctWeekDay: 3,
              sctStartTime: ''
            }, {
              sctWeekDay: 4,
              sctStartTime: ''
            }, {
              sctWeekDay: 5,
              sctStartTime: ''
            }, {
              sctWeekDay: 6,
              sctStartTime: ''
            }, {
              sctWeekDay: 7,
              sctStartTime: ''
            },
          ]
        })

        this.loadUserData(1)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
     * 删除
     */
    onclickDel(item) {
      this.$confirm('确认删除该条记录？', async() => {
        await removeConsultUser(item.siId)
        this.loadUserData(1)
      })
    },
    /**
     * 更新学长学姐值
     * @param {Boolean} val 是否选中
     * @param {Object} item 咨询行数据
     * @param {String} key 字段值
     */
    async updateConsult(val, item, key) {
      const params = item

      params[ key ] = Number(val)
      await updateConsultUser(params)
    }
  }
}
</script>

<style lang="scss" scoped>
.users {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .add-btn {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .control {
    .el-button {
      margin: 0;

      &:not(:last-of-type) {
        margin-right: 10px;
      }
    }
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
